<template>
	<view style="background-color: #f2f2f2;position: relative;">
		<view ref="fixedTop" style="position: fixed;top:0;z-index: 99;">
			<com-nav-bar :fixed="true" @clickLeft="back" left-icon="back" title="商品库存"></com-nav-bar>
		</view>
		
		<view :style="{marginTop:fixedTopHeight+'px'}" >
			<view class="body" v-if="dataList.length > 0" >
			
				<view v-if="goods_type == 1" class="list-item" v-for="item in dataList">
					<view style="width:100%">
						<view class="name" v-line-clamp="1">{{item.name}}</view>
						<view style="display: flex;align-items: center;justify-content:space-between;">
							<view style="font-size: 10pt;color:#a3a3a3;">名额数量：x{{item.num}}</view>
						</view>
					</view>
				</view>
				
				<view v-if="goods_type == 2" class="list-item" v-for="item in dataList" @click="openUrl('/plugins/local_life/flowGoodsDetail?goods_id='+item.goods_id)">
					<view class="left">
						<image :src="item.cover_pic" lazy-load="true" class="tui-goods-img"></image>
					</view>
					<view class="right" style="display: flex;flex-direction: column;justify-content: space-around;height: 35vw;">
						<view>
							<view class="name">{{item.name}}</view>
							<view style="display: flex;align-items: center;justify-content: flex-end;">
								<view style="margin-right: 20rpx;"><text style="font-size: 10pt;">￥</text>{{(item.price)}}</view>
							</view>
						</view>
						<view>
							<view style="display: flex;justify-content: space-between;margin-top: 10rpx;">
								<view style="font-size: 10pt;">{{item.store_name}}</view>
								<view style="font-size: 9pt;">{{convertDistance(item.distance)}}</view>
							</view>
							<view style="width:100%;font-size:9pt;overflow: hidden;display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;text-align: right;">{{item.address}}</view>
						</view>
				
						<view style="font-size: 10pt;text-align: right;margin-top: 30rpx;">截止到：{{formatTimeToStr(item.expired_at * 1000)}}</view>
					</view>
				</view>
				
				
			</view>
			<u-loadmore style="padding: 20rpx 0;" :status="loadStatus" />
		</view>
	
	</view>
</template>

<script>
	import {formatTimeToStr} from "@/utils/date";
	let that;
	
	export default {
		data(){
			return {
				fixedTopHeight:0,
				goods_type: 1,
				searchForm:{},
				pagination:{
					page_count:0,
					current_page:1,
					total_count:0,
				},
				dataList: [],
				loadStatus:'nomore',
			}
		},
		beforeCreate(){
			that = this;
		},
		onLoad(opt){
			that.goods_type = opt.goods_type ?? 1;
			that.initData();
			that.getDataList();
		},
		onShow(){
			that.$nextTick(function(){
				that.fixedTopHeight = Math.ceil(that.$refs.fixedTop.$el.clientHeight);
			})
		},
		computed:{
			convertDistance(){
				return value =>{
					if(value){
						value = parseFloat(value).toFixed(2);
						let distance;
						if(value > 1000){
							distance = (value / 1000).toFixed(2) + 'km';
						}else{
							distance = value + 'm';
						}
						return distance;
					}
				}	
			},
			formatTimeToStr(){
				return value => formatTimeToStr(value,'yyyy-MM-dd')
			}
		},
		methods:{
			back(){
				that.navBack();
			},
			openUrl(url) {
				uni.navigateTo({url})
			},
			
			async getDataList(){
				that.loadStatus = 'loading';
				let url = that.$api.purchasing_system.stockGoodsList;
				if(that.goods_type == 2){
					url = that.$api.localLife.stockGoodsList;
				}
				let res = await that.$http.request({
					url,
					method:'get',
					data:{page:that.pagination.current_page,...that.searchForm},
					showLoading:true
				});
				that.loadStatus = 'nomore';
				if(res.code != 0){
					that.$http.toast(res.msg);
					return ;
				}
				if(that.goods_type == 2){
					that.dataList = that.dataList.concat(res.data.list);
					that.pagination = res.data.pagination;
					if (that.pagination.current_page < that.pagination.page_count) {
						that.loadStatus = 'loadmore';
					}
				}else{
					that.dataList = res.data
				}
			},
			initData(){
				that.dataList = [];
				that.pagination = {
					page_count:0,
					current_page:1,
					total_count:0,
				};
			},

		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.initData();
				this.getDataList();
			}, 1000);
		},
		onReachBottom() {
			let { current_page, page_count } = this.pagination;
			if (current_page >= page_count) {
				this.loadStatus = 'nomore';
				return;
			}
			this.pagination.current_page++;
			this.getDataList();
		}

	}
</script>

<style lang="scss">
	// 缺省页
	.order-nothing {
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.order-nothing-img {
		width: 187rpx;
		height: 187rpx;
		margin-bottom: 35rpx;
	}
	
	.order-nothing-text {
		font-size: 10pt;
		color: #808080;
	}
	.list-item{
		padding: 20rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
	}
	.list-item .left{
		width: 30vw;
		height: 30vw;
	}
	.list-item .left image{
		width: 100%;
		height: 100%;
	}
	.list-item .right{
		width: 62vw;
		height: 30vw;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.list-item .right .name{
		font-size: 12pt;
		line-height: 40rpx;
		height: 80rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	.list-item .right .btn {
		padding: 10rpx 30rpx;
		background-color: #FF7104;
		color: #fff;
		border-radius: 25rpx;
		font-size: 10pt;
	}
	
	.goods-type{
		display: flex;
		line-height: 60rpx;
		justify-content: space-around;
		background-color: #fff;
		position: fixed;
		top: 80rpx;
		width: 100vw;
		z-index: 1;
	}
	.goods-type view{
		padding: 10rpx 20rpx;
	}
	
	.body{
		margin-top: 80rpx;
	}
	
	
	.jx-modal-title {
		text-align: center;
		font-size: 34rpx;
		color: #333;
		padding-top: 20rpx;
		font-weight: bold;
	}
	.shopSetting-item {
		width: 90%;
		margin: 0 auto;
		border-bottom: 1rpx solid #888888;
		overflow: hidden;
		display: flex;
		justify-content: space-between
	}
	.shopSetting-title {
		height: 100rpx;
		line-height: 100rpx;
		margin-right: 20rpx;
		color: #000;
	}
	
	.shopSetting-int {
		height: 100rpx;
		max-width: 80%;
	}
	.shopSetting-int text{
		display: block;
		height: 100rpx;
		line-height: 100rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.shopSetting-int input {
		height: 100rpx;
		text-align: right;
	}

</style>